<template>
    <el-card
        shadow="always"
        :body-style="{
            'border-top': '4px solid #2B81FC',
        }"
    >
        <div>
            <span class="personTitle">薪资情况-{{ subTitle }}</span>
        </div>
        <el-row class="showInfo">
            <el-col :span="6">
                <div>
                    <div class="si-label">计薪人员</div>
                    <div class="si-label">
                        <span class="si-Number">{{ person }}</span
                        >人
                    </div>
                </div></el-col
            >
            <el-col :span="6">
                <div>
                    <div class="si-label">实发工资</div>
                    <div class="si-label">
                        <span class="si-Number">{{ salary }}</span
                        >人
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="showCrycle">
                    <span class="personTitle">实发人员占比</span>
                    <dv-water-level-pond
                        :config="config"
                        style="width: 150px; height: 150px"
                    />
                </div>
            </el-col>
        </el-row>
    </el-card>
</template>

<script>
export default {
    name: "profileShow",
    props: {
        subTitle: {
            type: String,
            default: "",
        },
        person: {
            type: Number,
            default: 0,
        },
        salary: {
            type: Number,
            default: 0,
        },
        department: {
            type: Number,
            default: 0,
        },
    },
    watch: {
        department(val) {
            let temp = {
                data: [val],
                shape: "round",
            };
            this.config = temp;
        },
    },
    data() {
        return {
            config: {
                data: [0],
                shape: "round",
            },
        };
    },
};
</script>

<style scoped>
.personTitle {
    font-size: 16px;
    font-weight: 700;
}
.showInfo {
    height: 62px;
    margin-top: 10px;
}
.si-label {
    font-size: 14px;
    color: #42526e;
    font-weight: 500;
}
.si-Number {
    font-size: 14px;
    color: #2b81fc;
    font-weight: 600;
}
.showCrycle {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.department {
    /* 一个灰色的圆，文字居中 */
    background-color: #e5e5e5;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
}
</style>
